<template>
    <transition name="ph-msg-fade">
        <div :class="cns" :style="style" v-if="visible">
            <icon v-if="type&&iconType" class="ph-msg-icon" :icon="iconType"/>
            <p :class="['ph-msg-body',clickable?'ph-pointer':'']" @click="click">{{content}}</p>
            <icon v-if="closable" @click="close(true)" class="ph-close" icon="close"/>
        </div>
    </transition>
</template>
<script lang="ts">
import { computed, defineAsyncComponent, defineComponent, PropType, ref } from 'vue'
import {PhMsgType} from './index.type'
export default defineComponent({
    components:{
        Icon:defineAsyncComponent(()=>import("../base/icon.vue"))
    },
    props:{
        type:{
            type:String as PropType<PhMsgType>
        },
        icon:String,
        closable:Boolean,
        autoClose:Boolean,
        content:String,
        clickable:Boolean,
        onClose:Function,
        onClick:Function,
    },
    setup(props) {
        const visible = ref(false)
        const y = ref("")
        const cns = computed(()=>{
            return {
                'ph-msg':true,
                'ph-msg-success':props.type==="success",
                'ph-msg-danger':props.type==="danger",
                'ph-msg-info':props.type==="info",
                'ph-msg-warning':props.type==="warning"
            }
        })
        const style = computed(()=>{
            return {
                top:y.value
            }
        })
        const iconType = computed(()=>{
            if(props.icon)return props.icon
            switch(props.type){
                case "success":return "check-circle";
                case "warning":return "warning";
                case "danger":return "times-circle";
                case "info":return "info-circle";
            }
            return ""
        })
        const show = (top:string)=>{
            visible.value = true
            y.value = top
            if(props.autoClose){
                setTimeout(()=>{
                    close()
                },10000)
            }
        }
        const close = (manu?:boolean)=>{
            if(visible.value){
                visible.value = false
                props.onClose&&props.onClose(manu)
            }
        }
        const click = ()=>{
            if(!props.clickable)return
            props.onClick&&props.onClick()
            close()
        }
        return {cns,style,visible,iconType,show,close,click}
    },
})
</script>
<style lang="scss" scoped>
@import '../../assets/scss/predef.scss';
.ph-msg-fade-enter-from.ph-msg,
.ph-msg-fade-leave-to.ph-msg {
    opacity: 0;
    top:0;
    transform: translate(-50%,-100%);
}
.ph-msg-fade-leave-from.ph-msg,
.ph-msg-fade-enter-to.ph-msg {
    transform: translate(-50%,0%);
    opacity:1;
}

.ph-msg{
    position: fixed;
    backface-visibility: hidden;
    min-width: var(--ph-message-width);
    border-radius: 4px;
    left: 50%;
    transform: translate(-50%,0%);
    transition: opacity .3s,transform .4s,top .4s;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: var(--phx) var(--ph-20);
    z-index:10100;
    font-size: var(--phx);
    --ph-msg-color:var(--ph-c);
    --ph-msg-icon:var(--ph-c);
    --ph-msg-bd:var(--ph-bd-light);
    --ph-msg-bg:var(--ph-light-l1);
    &-success{
        --ph-msg-icon:var(--ph-success);
        --ph-msg-color:var(--ph-success-color);
        --ph-msg-bg:var(--ph-success-bg);
        --ph-msg-bd:var(--ph-success-bd);
    }
    &-danger{
        --ph-msg-icon:var(--ph-danger);
        --ph-msg-color:var(--ph-danger-color);
        --ph-msg-bg:var(--ph-danger-bg);
        --ph-msg-bd:var(--ph-danger-bd);
    }
    &-info{
        --ph-msg-icon:var(--ph-info);
        --ph-msg-color:var(--ph-info-color);
        --ph-msg-bg:var(--ph-info-bg);
        --ph-msg-bd:var(--ph-info-bd);
    }
    &-warning{
        --ph-msg-icon:var(--ph-warning);
        --ph-msg-color:var(--ph-warning-color);
        --ph-msg-bg:var(--ph-warning-bg);
        --ph-msg-bd:var(--ph-warning-bd);
    }
    &-icon{
        color: var(--ph-msg-icon);
        font-size:  var(--ph-20);
        width: auto;
        margin-right: var(--phx);
        flex:0 0 auto;
    }
    .ph-close{
        position: absolute;
        right:  var(--ph-10);
        color:var(--ph-msg-color);
        cursor:pointer;
        &:hover{
            color: var(--ph-c-d1);
        }
    }
    color: var(--ph-msg-color);
    background-color: var(--ph-msg-bg);
    border:1px solid var(--ph-msg-bd);
}
</style>
